<template>
	<view class="content">

		<view class="zy-title">
			请绑定持卡人本人的银行卡
		</view>
		<view>
			<!-- <view class="row b-b">
				<text class="tit zy-required">开户银行</text>
				<picker class="subject-type" :value="bankIndex" :range="bankArr" @change="handleBank">
					<view class="uni-input">{{form.bankName?form.bankName:"请选择"}}</view>
				</picker>
			</view> -->
			<view class="row b-b">
				<text class="tit zy-required">真实姓名</text>
				<input class="input" v-model="form.accountName" placeholder="持卡人姓名" />
				<zywork-icon type=""></zywork-icon>
			</view>
			<view class="row b-b">
				<text class="tit zy-required">银行卡号</text>
				<input class="input" type="number" v-model="form.bankcardNo" placeholder="请输入您的银行卡卡号" />
			</view>
			<view class="row b-b">
				<text class="tit zy-required">手机号</text>
				<input class="input" type="number" v-model="form.phone" placeholder="请输入你的开户预留手机号" />
			</view>
			<view class="row b-b">
				<text class="tit zy-required">验证码</text>
				<input class="input" type="number" v-model="form.verifyCode" placeholder="请输入你的验证码" />
				<view class="zy-verification-code" :disabled="disabled" @click="verificationCode">
					{{countdown}}
				</view>
			</view>
			<button class="add-btn" @click="confirmAdd" :disabled="submitAddress">提交</button>
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import * as ResponseStatus from '@/common/response-status.js';
	import {
		doGet,
		BASE_URL,
		doPostForm,
		isPhone,
		isRegName,
		doGetForm,
		getUserToken,
		doPostJson,
		USER_TOKEN_KEY,
		FRONT_BASE_URL,
		LOCAL_FILE_STORAGE,
		showInfoToast,
		showSuccessToast
	} from '@/common/util.js';
	import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'

	export default {
		components: {
			uniList,
			uniListItem,
			zyworkIcon
		},
		data() {
			return {
				countdown:'获取验证码',
				disabled:false,
				timestatus:false,
				countIndex: 0,
				count: [1],
				form: {
					userName: '',
					accountName: '',
					bankCode: '',
					bankName: '',
					bankcardNo: '',
				},
				bankIndex: 0,
				submitAddress: false,
				bankArr: ['CBC-中国建设银行', 'CITIC-中信银行', 'BC-中国银行', 'ABC-中国农业银行', 'ICBC-中国工商银行', 'CMSB-民生银行', 'CMBC-招商银行', 'CIB-兴业银行',
					'CDB-国家开发银行', 'HSBC-汇丰银行', 'PBC-中国人民银行', 'CEB-中国光大银行'
				]
			};
		},
		methods: {

			inquire() {
				if (!isPhone(this.form.phone)) {
					showInfoToast('请输入正确的手机号')
				    return;
				}
				this.submitAddress =true;
				doPostForm('/user-bankcard/user/info', this.form, {}, true).then(response => {
					uni.hideLoading()
					let [error, res] = response
					if (res.data.code == ResponseStatus.OK) {
						this.form.bankName = res.data.data
						this.form.bankcardNo = this.form.bankcardNo.replace(/\s+/g, "");
						
						doPostForm('/user-bankcard/user/bind', this.form, {}, true).then(response => {
							let [error, res] = response
							if (res.data.code === ResponseStatus.OK) {
								showSuccessToast('添加成功')
								this.submitAddress =false;
								setTimeout(() => {
									// uni.reLaunch({
									// 	url: '/pages/user/paylist/banklist'
									// })
									uni.navigateBack({
										delta: 1
									})
								}, 500)
							} else {
								this.submitAddress =false;
								showInfoToast(res.data.message)
							}
						})
					} else {
						this.submitAddress =false
						showInfoToast(res.data.message)
					}
				})
			},
			handleBank(e) {
				this.bankIndex = e.target.value
				this.form.bankName = this.bankArr[this.bankIndex]
			},
			async checkPermission(code) {
				let type = code ? code - 1 : this.sourceTypeIndex;
				let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
					await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
						'android.permission.READ_EXTERNAL_STORAGE');

				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "没有开启权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}

				return status;
			},
			// 倒计时
			countDown(){
				var that = this;
				if(!that.countdown){                    
					that.disabled = false;
					that.timestatus = false;
					that.countdown = '获取验证码';
					clearInterval(that.clear);
				}else{
					--that.countdown;
				}
			},
			//发送验证码
			verificationCode(){
				if (!isPhone(this.form.phone)) {
					showInfoToast('请输入正确的手机号')
				    return;
				}
				const data = {
				    phone: this.form.phone,
				}
				this.disabled = true;//禁用点击
				// 发送验证码
				doPostForm('/user/user/bank-card-code', data, {}, false).then(response => {
					let [error, res] = response
					if (ResponseStatus.OK == res.data.code) {
						uni.showToast({
						    icon: 'none',
						    title: res.data.message,
						});
						this.countdown = 90;
						this.timestatus = true;
						this.clear = setInterval(this.countDown,1000);
					} else {
						uni.showToast({
						    icon: 'none',
						    title: res.data.message,
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			/**
			 * 确认添加
			 */
			confirmAdd() {
				if (!isRegName(this.form.accountName)) {
					showInfoToast("请输入你的真实姓名")
					return
				}
				if (!this.form.bankcardNo) {
					showInfoToast("请输入你的卡号")
					return
				}
				if (!isPhone(this.form.phone)) {
					showInfoToast("请输入正确的手机号")
					return
				}
				this.inquire();
			}
		}

	}
</script>

<style lang="scss">
	@import '@/common/zywork-main.scss';

	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.zy-verification-code{
		width: 270rpx;
		height: 80rpx;
		border: solid 1rpx #999999;
		font-size: $font-base;
		color: #666666;
		line-height: 80rpx;
		text-align: center;
		border-radius: 30px;
	}

	.zy-title {
		width: 100%;
		margin: 100rpx 0rpx;
		text-align: center;
		font-size: $font-lg;
	}

	.zy-head-img {
		margin: 10upx auto;
		text-align: center;
	}

	.zy-head-img image {
		border-radius: 50%;
		width: 200upx;
		height: 200upx;
	}

	.zy-intro {
		width: 100%;
		padding: 30rpx 30rpx;
		background-color: #FFFFFF;

		.text {
			width: 100%;
			height: 300rpx;
			border: solid 1rpx #e3e3e3;
			border-radius: 15rpx;
			padding: 10rpx 10rpx;
		}
	}

	.business-scope {
		width: 100%;
		height: 150rpx;
		border: solid 1rpx #e3e3e3;
		border-radius: 15rpx;
		padding: 10rpx 10rpx;
	}

	.subject-type {
		width: 400rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 30rpx 30upx;
		background: #fff;

		.tit {
			width: 160rpx;
			flex-shrink: 0;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-light;
			// padding-right: 10rpx;
			margin-right: 20rpx;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $theme-backcolor;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(0, 170, 127, 0.4);
	}
</style>
